<nz-spin [nzSpinning]="isSpinning">
  <div style="color: red;height: auto;margin-left: 25%;width: 50%;">甲乙双方的名称需在项目所在地的特种设备安全监管部门完成备案后可选</div>
  <form nz-form [formGroup]="validateForm">
    <div nz-form-item nz-row>
      <div nz-form-label nz-col [nzSm]="8" [nzXs]="24">
        <label nz-form-item-required>甲方名称</label>
      </div>
      <div nz-form-control nz-col [nzSm]="10" [nzXs]="24" nzHasFeedback [nzValidateStatus]="getFormControl('firstParty')">
        <nz-select style="width: 320px;" nzAllowClear [nzPlaceHolder]="'请输入甲方名称'" [(ngModel)]="contractBean.firstParty"
          nzShowSearch formControlName="firstParty" name="firstParty" nzDisabled="{{firstDisable}}">
          <nz-option *ngFor="let option of firstList" [nzLabel]="option.partyName" [nzValue]="option.id" [nzDisabled]="option.disabled">
          </nz-option>
        </nz-select>
        <!-- <nz-input formControlName="firstParty" [nzId]="'firstParty'" [(ngModel)]="contractBean.firstParty" name="firstParty" [nzPlaceHolder]="'请输入甲方名称'"></nz-input> -->
        <div nz-form-explain *ngIf="getFormControl('firstParty').dirty&&getFormControl('firstParty').hasError('required')">甲方名称不能为空!</div>
      </div>
    </div>
    <div nz-form-item nz-row>
      <div nz-form-label nz-col [nzSm]="8" [nzXs]="24">
        <label nz-form-item-required>乙方名称</label>
      </div>
      <div nz-form-control nz-col [nzSm]="10" [nzXs]="24" nzHasFeedback [nzValidateStatus]="getFormControl('secondParty')">
        <nz-select style="width: 320px;" nzAllowClear [nzPlaceHolder]="'请输入已方名称'" [(ngModel)]="contractBean.secondParty"
          nzShowSearch formControlName="secondParty" name="secondParty" nzDisabled="{{secondDisable}}">
          <nz-option *ngFor="let option of secondList" [nzLabel]="option.partyName" [nzValue]="option.id" [nzDisabled]="option.disabled">
          </nz-option>
        </nz-select>
        <!-- <nz-input formControlName="secondParty"  [nzId]="'secondParty'" [(ngModel)]="contractBean.secondParty" name="secondParty" [nzPlaceHolder]="'请输入乙方名称'"></nz-input> -->
        <div nz-form-explain *ngIf="getFormControl('secondParty').dirty&&getFormControl('secondParty').hasError('required')">乙方名称不能为空!</div>
      </div>
    </div>
    <div nz-form-item nz-row>
      <div nz-form-label nz-col [nzSm]="8" [nzXs]="24">
        <label nz-form-item-required>合同类型</label>
      </div>
      <div nz-form-control nz-col [nzSm]="10" [nzXs]="24" nzHasFeedback [nzValidateStatus]="getFormControl('contractType')">
        <nz-select nzAllowClear formControlName="contractType" [nzPlaceHolder]="'请选择'" [(ngModel)]="contractBean.contractType"
          [nzShowSearch]="true" name="contractType">
          <nz-option [nzLabel]="'维保委托合同'" [nzValue]="'维保委托合同'" [nzDisabled]="false">
          </nz-option>
          <nz-option [nzLabel]="'检验委托合同'" [nzValue]="'检验委托合同'" [nzDisabled]="false">
          </nz-option>
          <nz-option [nzLabel]="'电梯责任险合同'" [nzValue]="'电梯责任险合同'" [nzDisabled]="false">
          </nz-option>
          <nz-option [nzLabel]="'其他'" [nzValue]="'其他'" [nzDisabled]="false">
          </nz-option>
        </nz-select>
        <div nz-form-explain *ngIf="getFormControl('contractType').dirty&&getFormControl('contractType').hasError('required')">合同类型不能为空!</div>
      </div>
    </div>
    <div nz-form-item nz-row>
      <div nz-form-label nz-col [nzSm]="8" [nzXs]="14">
        <label nz-form-item-required>附件</label>
      </div>
      <div nz-form-control nz-col [nzSm]="16" [nzXs]="24" nzHasFeedback>
        <!--<nz-upload nzAction="{{config.IP+config.API.upload}}" nzListType="picture-card" [(nzFileList)]="fileList"
          [nzPreview]="handlePreview" [nzRemove]="nzRemoveFile" (nzChange)="handleChange($event)">
          <i class="anticon anticon-plus"></i>
          <div class="ant-upload-text">上传</div>
        </nz-upload>-->

        <nz-upload nzAction="{{config.IP+config.API.upload}}" [(nzFileList)]="fileList" [nzShowButton]="true" [nzRemove]="nzRemoveFile" [nzPreview]="handlePreview" (nzChange)="handleChange($event)">
          <button nz-button>
            <i class="anticon anticon-upload"></i><span>上传</span>
          </button>
        </nz-upload>

        <nz-modal [nzVisible]="previewVisible" [nzContent]="modalContent" [nzFooter]="null" (nzOnCancel)="previewVisible=false">
          <ng-template #modalContent>
            <img [src]="previewImage" [ngStyle]="{ 'width': '100%' }" />
          </ng-template>
        </nz-modal>
      </div>
    </div>
    <div nz-form-item nz-row style="margin-bottom:8px;">
      <div nz-form-control nz-col [nzSpan]="14" [nzOffset]="10">
        <button nz-button [nzSize]="'large'" (click)="submitForm()" [nzType]="'primary'">添加</button>
      </div>
    </div>
  </form>
</nz-spin>
